<template>
	<view class="da">
		<view class="" style="text-align: center;">
			猜数字答案:{{answer}}
		</view>
		<view class="congxin">
			<input type="text" v-model="tips" />
		</view>

		<view class="cai">
			<view @click="cai">猜</view>
		</view>
		<view v-for="(item,index) in list" :key="index">
			<text>第{{index+1}}次：{{item.tips}} {{item.content}}</text>
		</view>
		<button class="kaishi" type="default" size="mini" @click="pyly">重新开始</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tips:"",
				list: [],
				answer: Math.floor(Math.random() * 10 + 1),
			}
		},
		methods: {
			cai() {
				let content = " "
				var tips = this.tips
				var answer = this.answer
				if (tips == "") {
					return uni.showToast({
						title: "不能为空"
					})
				}else if(tips > answer){
					content = "猜的数字大了！"
				}else if(tips < answer){
					content = "猜的数字小了！"
				}else if(tips == answer){
					content = "恭喜您猜对了！"
				}else{
					content = "猜！"
				}
				this.list.push({
					tips: this.tips,
					content: content
				})
				this.tips = ""
			},
			pyly() {
				this.list = [],
				this.answer = Math.floor(Math.random() * 10 + 1)
			}
		}
	}
</script>

<style scoped>
	.da{
		width: 100%;
		text-align: center;
	}
	.cai {
		width: 100%;
		text-align: center;
	}

	.congxin {
		width: 100%;
		text-align: center;
		cursor: pointer;
		margin-top: 50px;
	}

	.kaishi {
		background-color: #4CD964;
	}

	input {
		margin-left: 20%;
		width: 50%;
		border: 1px solid red;
	}

	.cai view {
		height: 35px;
		width: 40px;
		color: #FFFFFF;
		line-height: 33px;
		border-radius: 50px;
		position: relative;
		left: 73%;
		top: -30px;
		background-color: #555555;
	}
</style>
